<template>
  <!-- 头部搜索区域 -->
  <view class="search-jiazheng">
    <!-- <uni-search-bar placeholder="职能匹配" @confirm="search" @input="input" cancelButton="none" style="width: 600rpx;">
    </uni-search-bar> -->
    <view class="my-search-container" @click="sonOpen">
      <!-- 使用 view 组件模拟 input 输入框的样式 -->
      <view class="my-search-box">
        <uni-icons type="search" size="17"></uni-icons>
        <text class="placeholder">智能匹配</text>
      </view>
    </view>
    <!-- 下拉选项框 -->
    <uni-data-select border="false" v-model="value" :localdata="range" :clear="false"></uni-data-select>

  </view>
</template>

<script>
  export default {
    name: "search",
    data() {
      return {
        value: 0,
        range: [{
            value: 0,
            text: "长沙"
          },
          {
            value: 1,
            text: "成都"
          },
          {
            value: 2,
            text: "北京"
          },
        ],
      };
    },
    methods: {
      sonOpen() {
        this.$emit('faOpen')
      }
    }
  }
</script>

<style lang="scss">
  // 
  .search-jiazheng {
    background-color: #3f51b5;
    height: 90rpx;
    display: flex;
    align-items: center;

    // 模拟搜索框
    .my-search-container {
      width: 580rpx;
      height: 60rpx;
      padding: 0 20rpx;

      .my-search-box {
        width: 100%;
        height: 100%;
        background-color: #fff;
        border-radius: 10rpx;
        display: flex;
        align-items: center;

        .placeholder {
          color: #979191;
          font-size: 26rpx;
          width: 174rpx;
          height: 40rpx;
          margin-left: 20rpx;
        }
      }
    }


    /deep/.uni-stat__select {
      .uni-select {
        border: 0;

        .uni-select__input-text {
          color: #fff;
        }
      }
    }
  }
</style>
